<template>
	<view class="main" :style="'top:'+(-demo.height-demo.top-10)+'px'">
		<view :style="'padding-top:'+(demo.height+demo.top+10)+'px'">
			<head1 class="nav_top"
				:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10px'"
				:nav="title">
			</head1>
		</view>
		<view class="index_line">
		</view>
		<view class="BeInterested">

			<view class="Be_body">
				<view style="margin: 30rpx auto;text-align: center;" v-if="data.length==0">
					暂无消息
				</view>
				<!-- <view class="Be_body_tit" v-if="data.length!=0" @click="read(ids)">{{readed}}</view> -->
				<!-- @click="clickImg(item.noticeId)"点击已读 -->
				<view class="Be_body_main" v-for="(item,index) in data" :key="index">
					<view class="Be_body_main_top">
						<!-- :class="item.isRead!='000000'?'Bbmt_active_left':''" -->
						<view class="Bbmt_left dis_flex">
							<view>公告</view>
							<text>{{item.context}}</text>
						</view>
						<view class="Bbmt_right dis_flex">
							<view>{{item.createTime}}</view>
						</view>
					</view>
					<view class="Be_body_main_bot">
						<view class="Bemb_actile">
							<!-- :class="item.isRead!='000000'?'zhankai':(finalNum>0)?'defaultColor':'finallColor'" -->
							<view class="Bemb_actile_main">
								{{item.dataText}}
							</view>
							<!-- <image src="../../static/icon/bottom.png" mode="" @click="imgageClickLine()"></image> -->
						</view>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import head1 from '../../common/head/head'
	export default {
		components: {
			head1
		},
		data() {
			return {
				title: '我的消息',
				demo: {
					top: '',
					height: ''
				},
				readed:'', //一键已读
				activeDiv: false,
				activeImg: false,
				finallColor: false,
				finalNum: 1,
				data: {},
				ids: [], //一键已读
				dataList: {
					userId: '',
					currertPage: 1,
					pageSize: 1000
				}
			}
		},
		computed: {
			userid() {
				return this.$store.state.userId
			},
			getResumeid() {
				return this.$store.state.resumeId
			}
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height
			this.dataList.userId = this.userid
			this.getMyNews(this.dataList)
		},
		methods: {
			getMyNews(data) {
				let _this=this
				uni.showLoading({
					title:'数据加载中...'
				})
				setTimeout(function(){
					_this.$myResquest.peronsMsg(data).then(res => {
						if (res.data.code == 200) {
							_this.data = res.data.data
							if(_this.data.length!=0){
								_this.readed='一键已读'
							}
							for (var i = 0; i < _this.data.length; i++) {
								if (_this.data[i].isRead == '000000') {
									_this.ids.push(_this.data[i].noticeId)
								}
							}
							
							uni.hideLoading()
						} else {
							uni.showToast({
								title: '数据加载失败'
							})
							uni.hideLoading()
						}
					})
				},1000)
			},
			clickImg(id) {
				this.$myResquest.peronsMsgRead({
					noticeIds: id
				}).then(res => {
					if (res.data.code == 200) {
						// 重新渲染
						this.getMyNews(this.dataList)
					}
				})
			},
			// 一键已读
			read(ids) {
				let idArr = ids.join(',')
				if (idArr.length != 0) {
					this.$myResquest.peronsMsgRead({
						noticeIds: idArr
					}).then(res => {
						if (res.data.code == 200) {
							// 重新渲染
							this.getMyNews(this.dataList)
						}
					})
				}

			},
			imgageClickLine() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.BeInterested {
		position: absolute;
		width: 100%;
		background: #ffffff;
		height: 100%;

		.Be_body {
			width: 670rpx;
			margin: 0 auto;
			// background-color: pink;
			height: 100%;

			.Be_body_tit {
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				color: #5cd1ce;
				padding: 30rpx 0 46rpx;
				box-sizing: border-box;
				text-align: right;
			}

			.Be_body_main {
				width: 100%;
				border-bottom: 1rpx solid #e5e5e5;
				padding: 20rpx 0 0;

				.Be_body_main_top {
					display: flex;
					justify-content: space-between;

					.Bbmt_left {
						>view {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: center;
							color: #ffffff;
							height: 30rpx;
							line-height: 30rpx;
							background: #5cd1ce;
							border-radius: 3rpx;
							padding: 5rpx;
							box-sizing: content-box;
						}

						text {
							margin-left: 10rpx;
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							color: #333333;
						}
					}

					.Bbmt_right {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #999999;

						>text {
							margin-left: 10rpx;
						}
					}
				}

				.Be_body_main_bot {
					padding: 25rpx 0;
					box-sizing: content-box;

					.Bemb_actile {
						position: relative;
						width: 688rpx;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #333333;
						display: flex;
						align-items: flex-end;

						.Bemb_actile_main {
							display: block;
							width: 625rpx;
							// overflow: hidden;
							// text-overflow: ellipsis;
							// white-space: nowrap;
							    word-break: break-all;
						}

						image {
							position: absolute;
							right: 18rpx;
							width: 22rpx;
							height: 23rpx;
						}

					}

				}
			}
		}
	}

	.Bbmt_active_left {
		>view {
			background: #999999 !important;
		}

		>text {
			color: #999999 !important;
		}
	}

	.zhankai {
		width: 655rpx !important;
		white-space: normal !important;
		color: #999999;
	}

	.finallColor {
		color: #999999;
	}

	.defaultColor {
		color: #333333;
	}

	.imgRorate {
		transform: rotate(180deg);
	}

	.meishuju {
		margin: 50rpx auto;
		text-align: center;
		color: red;

	}
</style>
